<!--
* description: 上传(可显示隐藏)
* author: xlc
* createdDate: 2020-12-14
-->
<template>
  <el-col v-show="curIsShow" id="resect-upLoad" :span="span">
    <lableName
      :validrule="validrule"
      :cur-label-name="curLabelName"
      :is-show-label="isShowLabel"
      :is-require="isRequire"
    />

    <el-input v-model="filePath" :placeholder="$t('sys.button.selFile')/*选择文件*/" readonly>
      <i
        slot="suffix"
        :class="filePath !=='' ? 'el-input__icon el-icon-error' : ''"
        @click="delectFile()"
      />
      <el-upload
        slot="append"
        action
        :multiple="isMul"
        :show-file-list="false"
        class="upload-demo"
        :auto-upload="false"
        :on-change="handleChange"
      >
        <el-button size="small" type="primary">{{ $t('选择文件')/*点击上传*/ }}</el-button>
      </el-upload>
    </el-input>

    <validateFormate :cur-label-name="curLabelName" :validrule="validrule" />
  </el-col>
</template>
<script>
export default {
  name: 'PurcashType',
  components: {
    lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    validateFormate: () => import('@/components/validateFormate') // 校验提示样式组件
  },
  props: {
    isShow: { type: Boolean, default: true },
    codeField: { type: String, default: '' },
    validrule: { type: Object, default: () => {} },
    isRequire: { type: Boolean, default: false },
    isShowLabel: { type: Boolean, default: true },
    span: { type: Number, default: 6 },
    labelName: { type: String, default: '' },
    isMul: { type: Boolean, default: true }
  },
  data() {
    return {
      curIsShow: this.isShow,
      fileList: null,
      filePath: '',
      file: {},
      curLabelName:
        this.labelName === ''
          ? this.$t('sys.button.selFile') /* 选择文件*/
          : this.labelName
    }
  },
  methods: {
    setIsShow(isShow) {
      this.curIsShow = isShow
    },
    handleChange(file) {
      const that = this
      this.file = file
      // 添加多个附件判断
      if (this.filePath === '') {
        this.filePath = file.name
      } else {
        if (this.isMul) {
          this.filePath += ','
          this.filePath += file.name
        } else {
          this.filePath = file.name
        }
      }
      that.$parent.$parent.$parent.getComponentCode(this.filePath, '', this.codeField)
    },
    delectFile(file) {
      const that = this
      this.file = {}
      this.filePath = ''
      that.$emit('delectfiled', file)
    }
  }
}
</script>
<style lang='scss' scoped>
/deep/.el-input-group__append,
.el-input-group__prepend {
  border: 0;
}
</style>
